<template>
  <div class="editor_frame" @touchstart.stop="no" @touchstop.stop="no">
    <el-skeleton animated :loading="loading" :rows="9" />
    <Split v-model="split1" mode="vertical">
      <div slot="top">
      </div>
      <div slot="bottom">
        <el-card class="text_editor_bottom">
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane  name="first">
      <span slot="label"><i class="el-icon-edit"></i> 输入</span>
      输入</el-tab-pane>
    <el-tab-pane label="输出" name="second">
      <span slot="label"><i class="el-icon-tickets"></i> 输出</span>
      <el-alert :closable="false"
      v-show="success_show"
    :title="run_title"
    type="success"
    :description="run_out"
    show-icon>
  </el-alert>
  <el-alert :closable="false"
    v-show="!success_show&&run_out"
    :title="run_title"
    type="error"
    :description="run_out"
    show-icon
    style="height:100%;width:100%"
    >
   
  </el-alert>
</el-tab-pane>
    <el-tab-pane label="终端" name="third">
     <span slot="label"><i class="el-icon-cpu"></i> 终端</span> 
      终端</el-tab-pane>
  </el-tabs>
</el-card>
      </div>
      </Split>
    <!-- 终端区域-->
    <el-collapse-transition>

</el-collapse-transition>
   
  </div>

</template>
  <script>
import { geteditor, pusheditor, setLanguage } from "../../editors/index";
import { mapState } from "vuex";
export default {
  props: {},
  data() {
    return {
      editorObj: null,
      loading: true,
      erd: null,
      activeName:'second',
      split1:1,
      it:null
    };
  },
  props: {
    process: {
      type: Object,
      required: true,
    },
  },
  methods: {
    __init() {
      // 文件内容的获取
     // console.log(this.process.meta.file)
      if (this.process.meta == null) {
        // 编辑器渲染
        this.editorRender();
      } else {
        this.$basicAxios(this.$ms.getFileContent(this.process.meta.file.fileId, this.token),(resp)=>{
          this.editorRender(resp.data.data);
        })
      }
      this.$pubsub.subscribe(this.process.process_id, (name, lan) => {
        this.changeLanguage(lan);
      });
      this.$pubsub.subscribe(`showtab:${this.process.process_id}`,this.showTab)
      this.$pubsub.subscribe(`closetab:${this.process.process_id}`,this.closeTab)
    },
    changeLanguage(name) {
      setLanguage(this.editorObj, name);
    },
    editorRender(val) {
      this.editorObj = geteditor(this.ctrl_s);
      if(val) this.editor_set_val(val)
      this.it = setTimeout(() => {
        this.$el.querySelector('.top-pane').append(this.editorObj.el)
        this.editorObj.editor.layout();
        this.loading = false;
      }, 500);
      // 窗口尺寸监视
      this.erd = this.createErd();
      this.erd.listenTo(this.$el, (element) => this.editorObj.editor.layout());
    },
    ctrl_s() {
      const content = this.editorObj.editor.getModel().getValue();
      this.$basicAxios(this.$ms.pushFileContent(this.process.meta.file.fileId, content, this.token))
    },
    editor_set_val(val){
      this.editorObj.editor.getModel().setValue(val)
    },
    handleClick(tab, event) {
        console.log(tab, event);
      },
      showTab(){
        if(this.split1==1) this.split1 = 0.6
      },
      closeTab(){
        this.split1 = 1
      }
  },
  mounted() {
    this.__init();
  },
  beforeDestroy() {
    // 编辑器复用
    if(this.editorObj)pusheditor(this.editorObj)
    // 尺寸监视的卸载
    if(this.erd)this.erd.uninstall( this.$el.querySelector('.top-pane'))
    if(this.it) window.clearTimeout(this.it)
    this.$pubsub.unsubscribe(this.process.process_id)
    this.$pubsub.unsubscribe(`showtab:${this.process.process_id}`)
    this.$pubsub.unsubscribe(`closetab:${this.process.process_id}`)
  },
  updated() {
  },
  computed: {
    ...mapState("userAbout", ["token"]),
    run_time(){
      if(this.process.meta&&this.process.meta.run_result){
        return this.process.meta.run_result.times
      }
      return null;
    },
    run_out(){
      if(this.process.meta&&this.process.meta.run_result){
        return this.process.meta.run_result.out 
      }
      return null
    },
    run_title(){
      if(this.process.meta&&this.process.meta.run_result){
        switch(this.process.meta.run_result.yresultType){
          case 'RUN_SUCCESS':
            return `[ 运行成功 ] : ${this.run_time}MS`
          case 'RUN_ERROR':
            return `[ 运行失败 ] : ${this.run_time}MS`
          case 'COMPILE_ERROR':
            return `[ 编译失败 ] : ${this.run_time}MS`
          case 'RUN_TIMEOUT':
            return `[ 运行超时 ] ：${this.run_time}MS`
          deault:
          return `[ 未知结果 ]`
        }
      }
      return null
    },
    success_show(){
      if(this.process.meta&&this.process.meta.run_result){
        switch(this.process.meta.run_result.yresultType){
          case 'RUN_SUCCESS':
            return true
          case 'RUN_ERROR':
          case 'COMPILE_ERROR':
          case 'RUN_TIMEOUT':
            return false
        }
      return false
    }
  }
}
};
</script>
  
  <style lang="less" scoped>
.editor_frame {
  width: 100%;
  height: 100%;
}
.text_editor_bottom{
  position: absolute;
  bottom: 0%;
  z-index: 1;
  width:100%;
  height:100%;
}
/deep/.el-tab-pane{
  width:100%;
  height:100%
}
/deep/.el-tabs{
  height:calc(100% + 30px)
}
/deep/.el-tabs__content{
  height:70%
}
/deep/.el-tabs__header{
  height:30%;
  margin:0 0 0 0
}
/deep/.el-alert{
  height:100%
}
</style>
  